<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Reading Time Estimator</title>
  <style>
    * {
      box-sizing: border-box;
    }

    body {
      font-family: Helvetica, Arial, sans-serif;
      max-width: 800px;
      margin: 0 auto;
      padding: 20px;
      background-color: #f8f9fa;
      color: #333;
    }

    .container {
      background: white;
      border-radius: 12px;
      padding: 30px;
      box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
    }

    h1 {
      margin: 0 0 30px 0;
      color: #2c3e50;
      font-size: 28px;
      font-weight: 300;
    }

    .stats {
      display: grid;
      grid-template-columns: 1fr 1fr 1fr;
      gap: 20px;
      margin-bottom: 25px;
    }

    .stat {
      background: #f8f9fa;
      padding: 20px;
      border-radius: 8px;
      text-align: center;
      border: 2px solid #e9ecef;
    }

    .stat-label {
      font-size: 14px;
      color: #6c757d;
      margin-bottom: 5px;
      text-transform: uppercase;
      letter-spacing: 0.5px;
    }

    .stat-value {
      font-size: 24px;
      font-weight: 600;
      color: #2c3e50;
    }

    .reading-time {
      border-color: #3498db;
      background: #ebf3fd;
    }

    .reading-time .stat-value {
      color: #2980b9;
    }

    textarea {
      width: 100%;
      min-height: 300px;
      padding: 20px;
      border: 2px solid #e9ecef;
      border-radius: 8px;
      font-size: 16px;
      font-family: Helvetica, Arial, sans-serif;
      line-height: 1.6;
      resize: vertical;
      transition: border-color 0.3s ease;
    }

    textarea:focus {
      outline: none;
      border-color: #3498db;
    }

    textarea::placeholder {
      color: #6c757d;
    }

    .info {
      margin-top: 20px;
      padding: 15px;
      background: #f8f9fa;
      border-radius: 6px;
      font-size: 14px;
      color: #6c757d;
      text-align: center;
    }

    @media (max-width: 600px) {
      .stats {
        grid-template-columns: 1fr;
      }
      
      body {
        padding: 15px;
      }
      
      .container {
        padding: 20px;
      }
    }
  </style>
</head>
<body>
  <div class="container">
    <h1>Reading time estimator</h1>
    
    <div class="stats">
      <div class="stat">
        <div class="stat-label">Words</div>
        <div class="stat-value" id="wordCount">0</div>
      </div>
      <div class="stat">
        <div class="stat-label">Characters</div>
        <div class="stat-value" id="charCount">0</div>
      </div>
      <div class="stat reading-time">
        <div class="stat-label">Reading time</div>
        <div class="stat-value" id="readingTime">0 min</div>
      </div>
    </div>

    <textarea 
      id="textInput" 
      placeholder="Paste or type your text here to calculate reading time..."
    ></textarea>

    <div class="info">
      Calculation based on 230 words per minute average reading speed
    </div>
  </div>

  <script type="module">
  const textInput = document.getElementById('textInput');
  const wordCountEl = document.getElementById('wordCount');
  const charCountEl = document.getElementById('charCount');
  const readingTimeEl = document.getElementById('readingTime');

  const WORDS_PER_MINUTE = 230;

  function countWords(text) {
    if (!text.trim()) return 0;
    return text.trim().split(/\s+/).length;
  }

  function calculateReadingTime(wordCount) {
    const minutes = wordCount / WORDS_PER_MINUTE;
    
    if (minutes < 1) {
      return '< 1 min';
    } else if (minutes < 60) {
      return Math.round(minutes) + ' min';
    } else {
      const hours = Math.floor(minutes / 60);
      const remainingMinutes = Math.round(minutes % 60);
      return hours + 'h ' + remainingMinutes + 'm';
    }
  }

  function updateStats() {
    const text = textInput.value;
    const wordCount = countWords(text);
    const charCount = text.length;
    const readingTime = calculateReadingTime(wordCount);

    wordCountEl.textContent = wordCount.toLocaleString();
    charCountEl.textContent = charCount.toLocaleString();
    readingTimeEl.textContent = readingTime;
  }

  textInput.addEventListener('input', updateStats);
  textInput.addEventListener('paste', () => {
    setTimeout(updateStats, 10);
  });

  // Initialize with empty stats
  updateStats();
  </script>
</body>
</html>
